<div
  #loadingRef
  class="lv-loading"
  [ngClass]="{
    'lv-loading-icon-size-mini': lvSize === 'mini',
    'lv-loading-icon-size-small': lvSize === 'small',
    'lv-loading-icon-size-medium': lvSize === 'medium',
    'lv-loading-icon-size-default': lvSize === 'default',
    'lv-loading-no-text': !lvLoadingText
  }"
>
  <div #loadingContainer class="lv-loading-container" *ngIf="loading">
    <div class="lv-loading-content">
      <div
        class="lv-loading-loader-container"
        [style.width]="typeUtils.isNumber(lvSize) ? lvSize + 'px' : null"
        [style.height]="typeUtils.isNumber(lvSize) ? lvSize + 'px' : null"
      >
        <img class="lv-icon-loading" src="{{ assetsPrefixPath }}assets/webp/blue.png" alt="icon-loading" />
      </div>
      <p class="lv-loading-text">{{ lvLoadingText }}</p>
    </div>
    <div class="lv-loading-mask" *ngIf="lvMask"></div>
  </div>

  <ng-content></ng-content>
</div>
